feat(js): handling the web socket connection and events #5704

LetItRock · 2024-06-10T19:29:58Z

What changed? Why was the change needed?

The changes:

lazily connect to the WebSocket
allow to listen to WebSocket events
build UMD module with Webpack

Screenshots

Expand for optional sections

Related enterprise PR

Special notes for your reviewer

linear · 2024-06-10T19:30:01Z

COM-53 The WebSocket connection

netlify · 2024-06-10T19:30:16Z

❌ Deploy Preview for novu-design failed. Why did it fail? →

Name	Link
🔨 Latest commit	`3329087`
🔍 Latest deploy log	https://app.netlify.com/sites/novu-design/deploys/66744e31100aed0008a4ace3

LetItRock · 2024-06-10T19:30:47Z

packages/client/src/api/api.service.ts

@@ -1,4 +1,4 @@
-import {
+import type {


use import type everywhere in the @novu/client so that @novu/shared won't be included in the bundle

💭 thought (non-blocking): If we are just using the types, maybe we can move the @novu/shared under the devDependency as well.‏

We can't because of the types generated for ESM, they are not "copied" during the build time.

packages/js/package.json

LetItRock · 2024-06-10T19:32:19Z

packages/js/src/base-module.ts

+  protected onSessionSuccess(_: Session): void {}
+
+  protected onSessionError(_: unknown): void {}


These two functions will be overridden by the class that extends this one.

LetItRock · 2024-06-10T19:32:57Z

packages/js/src/event-emitter/novu-event-emitter.ts

@@ -25,7 +25,7 @@ export class NovuEventEmitter {
  }

  off<Key extends EventNames>(eventName: Key, listener: EventHandler<Events[Key]>): void {
-    this.#mittEmitter.on(eventName, listener);
+    this.#mittEmitter.off(eventName, listener);


my fault 😅

LetItRock · 2024-06-10T19:34:12Z

packages/js/src/novu.ts

+    if (this.#socket.isSocketEvent(eventName)) {
+      this.#socket.initialize();
+    }


When someone tries to listen to one of the WS events then initialize the WebSocket connection and add listeners on events.

LetItRock · 2024-06-10T19:35:31Z

packages/js/src/socket/socket.ts

+  #notificationReceived = ({ message }: { message: TODO }) => {
+    this.#emitter.emit(NOTIFICATION_RECEIVED, {
+      result: new Notification(message),
+    });
+  };
+
+  #unseenCountChanged = ({ unseenCount }: { unseenCount: number }) => {
+    this.#emitter.emit(UNSEEN_COUNT_CHANGED, {
+      result: unseenCount,
+    });
+  };
+
+  #unreadCountChanged = ({ unreadCount }: { unreadCount: number }) => {
+    this.#emitter.emit(UNREAD_COUNT_CHANGED, {
+      result: unreadCount,
+    });
+  };


Handle different types of WebSocket events and just call our emitter.

What type of information do we get from WS currently, except unread_count? I'd like to suggest to have one updated event for all WS signals for easier scalability in the future.

you can check the three above functions and their interfaces, that's what is called and returned

LetItRock · 2024-06-10T19:35:51Z

packages/js/src/socket/socket.ts

+    this.#socketIo = io(this.#socketUrl, {
+      reconnectionDelayMax: 10000,
+      transports: ['websocket'],
+      query: {
+        token: `${this.#token}`,
+      },
+    });
+
+    this.#socketIo.on('connect', () => {
+      this.#emitter.emit('socket.connect.success', { args, result: undefined });
+    });
+
+    this.#socketIo.on('connect_error', (error) => {
+      this.#emitter.emit('socket.connect.error', { args, error });
+    });
+
+    this.#socketIo?.on(WebSocketEvent.RECEIVED, this.#notificationReceived);
+    this.#socketIo?.on(WebSocketEvent.UNSEEN, this.#unseenCountChanged);
+    this.#socketIo?.on(WebSocketEvent.UNREAD, this.#unreadCountChanged);


Create the socket connection and listen on the events.

LetItRock · 2024-06-10T19:36:51Z

packages/js/src/socket/socket.ts

+    if (this.#token) {
+      this.#initializeSocket().then((error) => console.error(error));
+
+      return;
+    }
+
+    this.callWithSession(async () => {
+      this.#initializeSocket().then((error) => console.error(error));
+    });


When there is a session just initialize the socket, otherwise, initialize it when the session is created (lazily).

LetItRock · 2024-06-10T19:38:24Z

packages/js/tsup.config.ts

+  // {
+  //   ...baseConfig,
+  //   entry: { novu: 'src/umd.ts' },
+  //   format: ['iife'],
+  //   minify: true,
+  //   dts: false,
+  //   outExtension: () => {
+  //     return {
+  //       js: '.min.js',
+  //     };
+  //   },
+  //   esbuildPlugins: [
+  //     compress({
+  //       gzip: true,
+  //       brotli: false,
+  //       outputDir: '.',
+  //       exclude: ['**/*.map'],
+  //     }),
+  //   ],
+  // },


Commented out this code temporarily until we investigate why Rollup includes in UMD build some additional code that results in bigger bundle size.

…uild

* feat: ui solid * revert: novu/js package * feat: implement solidjs * refactor: update file name * fix: umd build * refactor: remove types from config * refactor: update the require ext * refactor: remove unused deps * refactor: rename app to inbox * feat: use novuoptions type * deat: update tsconfig * feat: remove rootelement on dispose * refactor: rename ui to inboxui * feat: add ui to umd * feat: update tsup build and removed umd for ui * refactor: imports and babel * chore: remove comment

netlify · 2024-06-20T14:55:52Z

✅ Deploy Preview for dev-web-novu ready!

Name	Link
🔨 Latest commit	`3329087`
🔍 Latest deploy log	https://app.netlify.com/sites/dev-web-novu/deploys/66744e315e61a0000714ef7c
😎 Deploy Preview	https://deploy-preview-5704--dev-web-novu.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

* feat(js): js sdk feeds module (#5688) * feat(js): improve the package json exports and tsup config * feat(js): lazy session initialization and interface fixes * feat(js): js sdk feeds module * feat(js): js sdk preferences (#5701) * feat(js): js sdk preferences * feat(js): handling the web socket connection and events (#5704) * feat(js): handling the web socket connection and events * feat: ui solid --------- Co-authored-by: Biswajeet Das <[email protected]> * fix: caching for session initialize * fix: worker --------- Co-authored-by: Paweł Tymczuk <[email protected]> Co-authored-by: Biswajeet Das <[email protected]> Co-authored-by: Dima Grossman <[email protected]>

LetItRock requested review from SokratisVidros and BiswaViraj June 10, 2024 19:29

LetItRock self-assigned this Jun 10, 2024

LetItRock temporarily deployed to Linting June 10, 2024 19:30 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting June 10, 2024 19:30 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting June 10, 2024 19:30 — with GitHub Actions Inactive

LetItRock commented Jun 10, 2024

View reviewed changes

LetItRock force-pushed the com-30-js-sdk-preferences branch from 713d403 to 708b237 Compare June 11, 2024 08:43

LetItRock force-pushed the com-53-js-sdk-ws branch from d7cadeb to 3a0e758 Compare June 11, 2024 08:55

LetItRock temporarily deployed to Linting June 11, 2024 08:55 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting June 11, 2024 08:55 — with GitHub Actions Failure

LetItRock temporarily deployed to Linting June 11, 2024 08:55 — with GitHub Actions Inactive

LetItRock force-pushed the com-53-js-sdk-ws branch from 3a0e758 to 4a5ef31 Compare June 11, 2024 09:05

LetItRock temporarily deployed to Linting June 11, 2024 09:05 — with GitHub Actions Inactive

LetItRock had a problem deploying to Linting June 11, 2024 09:05 — with GitHub Actions Failure

LetItRock force-pushed the com-30-js-sdk-preferences branch from b57c777 to 9b0473d Compare June 11, 2024 10:28

LetItRock force-pushed the com-53-js-sdk-ws branch from 4a5ef31 to 99896b5 Compare June 11, 2024 11:29

LetItRock temporarily deployed to Linting June 11, 2024 11:30 — with GitHub Actions Inactive

LetItRock temporarily deployed to Linting June 12, 2024 10:48 — with GitHub Actions Inactive

LetItRock temporarily deployed to Linting June 12, 2024 14:14 — with GitHub Actions Inactive

BiswaViraj approved these changes Jun 14, 2024

View reviewed changes

LetItRock and others added 17 commits June 20, 2024 16:21

feat(js): lazy session initialization and interface fixes

f37937b

feat(js): renamed the *.spec.ts to *.test.ts

1102abd

feat(js): js sdk feeds module

bf034f9

feat(js): the base js sdk package scaffolding

4a0308f

feat(js): set the dist file size limits and run the check after the b…

4e74481

…uild

feat(js): lazy session initialization and interface fixes

fbea11b

feat(js): renamed the *.spec.ts to *.test.ts

67c85cb

feat(js): js sdk feeds module

4167350

chore(js): simplified the notification and preference classes

b9abbae

feat(js): lazy session initialization and interface fixes

bce4acf

feat(js): the base js sdk package scaffolding

3a15212

feat(js): js sdk feeds module

acb3717

feat(js): handling the web socket connection and events

26ee19b

feat(js): bundle umd with webpack

ebc1d38

chore(js): removed old spec file

79c9757

chore(js): fixed the package building on esm and cjs modules

d405bfb

LetItRock force-pushed the com-53-js-sdk-ws branch from 4bbd103 to bc2510d Compare June 20, 2024 14:55

LetItRock temporarily deployed to Linting June 20, 2024 14:55 — with GitHub Actions Inactive

SokratisVidros approved these changes Jun 20, 2024

View reviewed changes

feat(js): moved all web socket connection code under ws folder

3329087

LetItRock temporarily deployed to Linting June 20, 2024 15:43 — with GitHub Actions Inactive

LetItRock merged commit 87c7330 into next Jun 20, 2024
28 checks passed

LetItRock deleted the com-53-js-sdk-ws branch June 20, 2024 16:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(js): handling the web socket connection and events #5704

feat(js): handling the web socket connection and events #5704

LetItRock commented Jun 10, 2024

linear bot commented Jun 10, 2024

netlify bot commented Jun 10, 2024 •

edited

Loading

LetItRock Jun 10, 2024

BiswaViraj Jun 11, 2024

LetItRock Jun 11, 2024

LetItRock Jun 10, 2024

LetItRock Jun 10, 2024

LetItRock Jun 10, 2024

LetItRock Jun 10, 2024

SokratisVidros Jun 17, 2024

LetItRock Jun 20, 2024

LetItRock Jun 10, 2024

LetItRock Jun 10, 2024

LetItRock Jun 10, 2024

netlify bot commented Jun 20, 2024 •

edited

Loading

		protected onSessionSuccess(_: Session): void {}

		protected onSessionError(_: unknown): void {}

feat(js): handling the web socket connection and events #5704

feat(js): handling the web socket connection and events #5704

Conversation

LetItRock commented Jun 10, 2024

What changed? Why was the change needed?

Screenshots

Related enterprise PR

Special notes for your reviewer

linear bot commented Jun 10, 2024

netlify bot commented Jun 10, 2024 • edited Loading

❌ Deploy Preview for novu-design failed. Why did it fail? →

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

netlify bot commented Jun 20, 2024 • edited Loading

✅ Deploy Preview for dev-web-novu ready!

netlify bot commented Jun 10, 2024 •

edited

Loading

netlify bot commented Jun 20, 2024 •

edited

Loading